<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>pure css parallax scrolling</title>
  <link rel="stylesheet" href="./style.css" type="text/css" />
  <body>
    <div class="slide header" id="title">
      <h1>Pure CSS Parallax</h1>
    </div>
    <div id="slide1" class="slide">
      <section class="title">
        <h1>Slide 1</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum fuga
          nemo quibusdam, dolores expedita dolorem sunt repellendus doloribus
          velit porro tempore, aspernatur placeat voluptas non delectus neque
          quam mollitia aliquam!
        </p>
      </section>
    </div>
    <div id="slide2" class="slide">
      <section class="title">
        <h1>Slide 2</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias ratione
          illo voluptatibus, expedita pariatur quisquam laborum excepturi odio,
          numquam, assumenda atque ipsum! Excepturi, commodi. Odio iste
          voluptatem deserunt sequi itaque explicabo nesciunt officia omnis.
          Esse incidunt id possimus debitis eius.
        </p>
      </section>
      <img src="https://picsum.photos/980/600" alt="#" />
      <img src="https://picsum.photos/960/600" alt="#" />
    </div>
    <div id="slide3" class="slide">
      <section class="title">
        <h1>Slide 3</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. At culpa
          rerum optio ad incidunt pariatur facilis eaque velit excepturi
          recusandae.
        </p>
      </section>
    </div>
    <div id="slide4" class="slide">
      <section class="title">
        <h1>The End</h1>
      </section>
    </div>
  </body>
</html>
